<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <style>
        *{
            margin:0;
            padding:0;
            border:none;
        }
        ul, li{
            list-style:none;
        }
        #box{
            width:360px;
            height:460px;
            border:1px solid #ccc;
            padding:10px;
            position:relative;
            margin-left:50px;
            margin-top:50px;
        }
        #box #middleImg{
            width:360px;
            height:360px;
            /*border:1px solid #ccc;*/
            padding:5px;
            position:relative;
            margin: auto auto;
        }
        #box #middleImg img{
            width:360px;
            height:360px;
        }
        #box #middleArea{
            width:100px;
            height:100px;
            background:rgba(100, 222, 200, 0.5);
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        #box #small{
            /*background: red;*/
            width:360px;
            height:50px;
            margin-top:10px;
        }
        #box #small li, #box #small li img{
            width:48px;
            height:48px;
        }
        #box #small li{
            float:left;
            border:1px solid #ccc;
            margin-left:10px;
            padding:5px;
            cursor:pointer;
        }
        #box #bigArea{
            position:absolute;
            left:420px;
            top:50px;
            overflow:hidden;
            width:400px;
            height:400px;
            border:1px solid #ccc;
            display:none;
        }
        #box #bigArea img{
            position:absolute;
            left:0;
            top:0;
            width:800px;
            height:800px;
        }
    </style>

</head>
<body>
<div id="box">
    <div id="middleImg">
        <img src="img/show/s1.jpg"/>
        <div id="middleArea"></div>
    </div>
    <div id="small">
        <ul>
            <li><img src="img/show/s1.jpg"/></li>
            <li><img src="img/show/s2.jpg"/></li>
            <li><img src="img/show/s3.jpg"/></li>
            <li><img src="img/show/s4.jpg"/></li>
            <li><img src="img/show/s5.jpg"/></li>

        </ul>
    </div>
    <div id="bigArea">
        <img id="bigImg" src="img/show/b1.jpg"/>
    </div>
</div>
</body>
</html>
<script>

    function getStyle(obj, attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(obj, null)[attr];
        }
        return obj.currentStyle[attr];
    }

    window.onload = function(){



        //核心公式    小区域/大区域=小图/大图


        //  小区域= (小图/大图) *大区域;
        //求出比例   小图/小区域=大图/大区域

        var oBox = document.getElementById('box');

        var middleImg = document.getElementById('middleImg');// 小图
        var middleArea = document.getElementById('middleArea')//小区域

        var bigArea = document.getElementById('bigArea');//大区域
        var bigImg = document.getElementById('bigImg');//大图

        // 小区域 =(小图/大图)*大区域

        var sH = (parseInt(getStyle(middleImg, "height")) / parseInt(getStyle(bigImg, "height"))) * parseInt(getStyle(bigArea, "height"));

        var sW = (parseInt(getStyle(middleImg, "height")) / parseInt(getStyle(bigImg, "height"))) * parseInt(getStyle(bigArea, "height"));

        middleArea.style.width = sW + "px";

        middleArea.style.height = sH + "px";


        //如果当前 小区域是隐藏的  middleArea.offsetWidth 无法拿到宽度
        console.log(middleArea.offsetWidth);
        var oScale = middleImg.offsetWidth / parseInt(getStyle(middleArea, "width"))


        //鼠标进入小图,让小区域显示
        middleImg.onmouseenter = function(){
            middleArea.style.display = "block";
            bigArea.style.display = "block";
            document.onmousemove = function(evt){
                var e = evt || window.event;

                var mX = e.clientX - oBox.offsetLeft - middleArea.offsetWidth / 2;

                if(mX <= 0){
                    mX = 0;
                }
                if(mX > middleImg.offsetWidth - middleArea.offsetWidth){
                    mX = middleImg.offsetWidth - middleArea.offsetWidth;
                }
                var mY = e.clientY - oBox.offsetTop - middleArea.offsetHeight / 2;


                if(mY <= 0){
                    mY = 0;
                }
                if(mY > middleImg.offsetWidth - middleArea.offsetWidth){
                    mY = middleImg.offsetWidth - middleArea.offsetWidth;
                }

                middleArea.style.left = mX + "px";
                middleArea.style.top = mY + "px";

                //移动大图
                bigImg.style.left = -oScale * mX + "px";
                bigImg.style.top = -oScale * mY + "px";
                middleImg.onmouseleave=function(){
                    bigArea.style.display = "none";
                    middleArea.style.display = "none";
                }
            }
        }


        middleImg.onmouseleave = function(){
            document.onmousemove = null;
        }

        var oLis = document.querySelectorAll('#small li');
        for(var [k, o] of oLis.entries()){

            o.index = k;
            o.onmouseenter = function(){
//                alert(this.index);
                middleImg.children[0].src = `img/show/s${this.index + 1}.jpg`;
                bigArea.children[0].src = `img/show/b${this.index + 1}.jpg`;
            }

        }


    }


</script>